import type { IPost, IPostBadge, IPostStyle, IUserOv } from '@/interfaces';
import { useContext } from 'react';
import { PostIdH5PageContext } from '@/contexts/mobile/PostId';
import Link from 'next/link';
import Image from 'next/image';
import { getUserAvatar } from '@/lib/tool';
import useUser from '@/hooks/useUser';
import PostName from '@/app/[locale]/common/post/name';

export default function NamePostIdH5Page({
  item,
  id,
  contentUpdatedOn,
  _contentUpdatedOnText,
  name,
  user,
  badges,
  style,
  createdBy,
}: {
  item: IPost;
  id: number;
  contentUpdatedOn: string;
  _contentUpdatedOnText: string | undefined;
  name: string;
  user: IUserOv;
  badges: IPostBadge[];
  style: IPostStyle | undefined;
  createdBy: number | undefined;
}) {
  const context = useContext(PostIdH5PageContext);
  const metadata = context.metadata!;
  const userQuery = useUser(metadata);
  const env = metadata.env;

  return (
    <div className="d-flex gap-4 justify-content-between  sticky-top py-2 pb-3 bg-body">
      <PostName
        item={item}
        isEdit={
          userQuery.data &&
          userQuery.data.user &&
          userQuery.data.user.id === createdBy
        }
        boxClassName="flex-grow-1"
      />
      <Link
        href={`/users/${user.id}`}
        className="text-reset text-decoration-none text-decoration-underline-hover"
      >
        <Image
          className="rounded-4"
          src={getUserAvatar(user, metadata).mediumAvatarUrl}
          alt="avatar"
          width={56}
          height={56}
          placeholder="blur"
          blurDataURL={env.APP_BLUR_DATA_URL}
        />
      </Link>
    </div>
  );
}
